<template>

    <MyCard class="container">
        <h3 style="margin-bottom: 20px;">登录页面</h3>
        <el-form style="width: 400px;">
            <el-form-item>
                <el-input placeholder="请输入账号" v-model="loginItem.account"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入密码" type="password" show-password v-model="loginItem.password"></el-input>
            </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center;">
            <el-button type="primary" style="width: 100px;" @click="adminLogin()">登录</el-button>
        </div>
    </MyCard>
</template>

<script setup lang="ts">
import { adminLoginApi } from '@/api/adminManage';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const loginItem = ref<{ account: string, password: string }>({
    account: 'Huan123',
    password: '123456',
});
function adminLogin() {
    adminLoginApi(loginItem.value).then(res => {
        console.log(res);
        if (res.code == 200) {
            ElMessage.success('登录成功！');
            localStorage.loginToken = res.token;
            router.replace('/admin/index');
        } else {
            ElMessage.error(res.message);
        }
    })
}

</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.el-form-item__content {
    justify-content: center !important;
}
</style>